/**
 * Created by kroyo on 2017/8/3.
 * 设计库列表页
 */
@charset "utf-8";

@import "common/minxincommon";
@import "common/othercommon";


.design-works{
  background-color: #eeeeee;
  padding: 40px 0;
  .works-title{
    font-size:20px;
    color: #333333;
    font-weight:700;
  }
  .style-down{
    left:451px;
  }
  .works-select{
    margin:30px 0 40px;
    &>div{
      float: left;
      height:40px;
    }
    //选择框
    .select-wrap{
      position: relative;
      line-height:38px;
      margin-right: 30px;
      padding: 0 20px;
      font-size: 14px;
      .selectOff,.selectOn{
        position: absolute;
        top:14px;
        right:20px;
        display: block;
        content: '';
        width:12px;
        height: 12px;
        font-size:0;
        background: url(../img/dlibrary/down.png) no-repeat center;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -ms-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
      }
      .selectOn{
        display: none;
        background-image: url(../img/dlibrary/btn-del.png);
      }
      //点击下拉时  未选择
      &.active .selectOff{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
      }
      //已选择的情况
    }
    //搜索框
    .search-wrap{
      float: right;
      border-radius: 2px;
      .input-text{
        width:440px;
        height:100%;
        line-height:38px;
        padding:0 20px;
        color: #1f2d3d;
        border:1px solid $bcolor;
        background: transparent;
      }
      .search-btn{
        width:60px;
        height:100%;
        background: url(../img/dlibrary/search-btn.png) no-repeat center;
        background-color: $bcolor-active;
        cursor: pointer;
      }
    }
  }
  .works-list{
    li {
      float: left;
      width: 285px;
      height: 340px;
      background-color: #fff;
      margin: 0 20px 20px 0;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      transition: all .4s;
      &:hover{
        -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.2);
        box-shadow: 0px 5px 5px rgba(0,0,0,.2);
        -webkit-transform: translate3d(0,-2px,0);
        -moz-transform: translate3d(0,-2px,0);
        -ms-transform: translate3d(0,-2px,0);
        -o-transform: translate3d(0,-2px,0);
        transform: translate3d(0,-2px,0);
        a:after{
          background-color: rgba(0,0,0,.1);
        }
        img{
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -ms-transform: scale(1.2);
          -o-transform: scale(1.2);
          transform: scale(1.2);
        }
        .info-label,.info-title{
          color: $bcolor-active;
        }
        .info-label>div{
          border-color: $bcolor-active;
        }
      }
    }
    .marginright{
      margin-right: 0px;
    }
    .img-loding{
      position: relative;
      width:100%;
      height:220px;
      text-align: center;
      cursor: pointer;
      overflow: hidden;
      a{
        display: block;
        width:100%;
        height:100%;
        &:after{
          display: inline-block;
          content: " ";
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: rgba(0,0,0,0);
          -webkit-transition: all .6s;
          -moz-transition: all .6s;
          -ms-transition: all .6s;
          -o-transition: all .6s;
          transition: all .6s;
          z-index: 1;
        }
      }
      img{
        max-width:100%;
        max-height:100%;
        vertical-align: middle;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
      }
    }
    .works-info{
      padding:0 18px;
    }
    .info-title{
      font-size:16px;
      font-weight:700;
      color: $bcolor;
      padding: 30px 0 20px;
      @include textoverflow;
    }
    .info-label{
      font-size:0;
      color: $labelcolor;
      &>div{
        height:26px;
        line-height: 24px;
        display: inline-block;
        font-size: 14px;
        padding: 0 10px;
        border:1px solid $bcolor;
        border-radius: 2px;
        margin-right: 10px;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -ms-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
      }
    }
  }
}




